<template>
  <div>
    <ClientOnly>
      <el-row>
        <el-col :span="12" :offset="0" style="padding-top: 20px;">
          <PageForm
            ref="pageForm"
            :list="list"
            :form-data="formData"
            :rules="rules"
            :width="'100'"
          >
          </PageForm>
        </el-col>
      </el-row>
      <el-button
        style="margin-left: 90px; margin-top: 20px"
        type="primary"
        @click="onSubform"
        >保存</el-button
      >

      <!-- 更新密码 -->
      <BottomDrawer
        :visible="passwordVisible"
        :width="449"
        title="修改密码"
        @close="passwordVisible = false"
      >
      <div style="overflow: hidden;padding-bottom: 20px;">
         <PageForm
          ref="pageFormRef" 
          :gutter="1"
          :width="'90px'"
          :labelPosition="'left'"
          :rules="updateRules"
          :list="updateList"
          :form-data="formUpdate"
        />
      </div>
       
        <template #footer>
          <div>
            <el-button size="" type="primary" @click="updateSubmit">
              确定
            </el-button>
            <el-button size="" @click="passwordVisible = false">取消</el-button>
          </div>
        </template>
      </BottomDrawer>
    </ClientOnly>
  </div>
</template>

<script setup lang="ts">
import type { FormRules } from 'element-plus';
import type { clinicInfo } from '@/types/clinicInfo';
import type { PageFormList } from '@/types/PageForm';
import { MD5 } from 'crypto-js'
import store from '@/store';
 
import { uploadFile } from '@/api/basedata/index';
import {getEmpInfo,updateNotes,updatePassword} from '@/api/individual/index'
import type {  EmpInfoData} from '@/types/individual'

const rules = reactive<FormRules<clinicInfo>>({});

// 获取序列列表
const emits = defineEmits(['refresh']);
const pageForm = ref();
const pageFormRef = ref();
const areaData = ref([]);
const formUpdate = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
});


const formData = ref<EmpInfoData>({
  empId:0,
  empNo: '',
  empName: '',
  gender: '',
  avatarUrl: '',
  title:'',
  deptId: 0,
  deptName: '',
  notes: ''
});



const list: PageFormList = [
  {
    list: [
      {
        span: 24,
        label: '头像',
        prop: 'avatarUrl',
        component: 'imgUpload',
        beforeUpload(file: { name: string }) {
          //console.log(file);
          uploadFile(file, file.name).then((res) => {
            if(res.data){
              formData.value.avatarUrl = res.data ;
              ElMessage.success('上传成功');
            } else {
              //ElMessage.error('上传失败');
            }
          });
          return false; // 阻止自动上传
        },
      },
      {
        span: 24,
        label: '姓名',
        prop: 'empName',
        component: 'content',
      },
      {
        span: 24,
        label: '性别',
        prop: 'gender',
        component: 'content',
      },
      {
        span: 24,
        label: '工号',
        prop: 'empNo',
        component: 'content',
      },
      {
        span: 24,
        label: '科室',
        prop: 'deptName',
        component: 'content',
      },
      {
        span: 24,
        label: '密码',
        prop: 'clinicName',
        component: 'password',
        componentProps:{
          onClick: () => {
            formUpdate.value.oldPassword = '';
            formUpdate.value.newPassword = '';
            formUpdate.value.confirmPassword = '';
            passwordVisible.value = true;
          },
        }
      },
      {
        span: 24,
        label: '个人简介',
        prop: 'notes',
        component: 'textarea',
        componentProps: {
          width: '401px',
        },
      },
    ],
  },
];
const updateList: PageFormList = [
  {
    list: [
      {
        span: 24,
        label: '旧密码',
        prop: 'oldPassword',
        component: 'input',
        componentProps: {
          width: '311px',
        },
      },
      {
        span: 24,
        label: '新密码',
        prop: 'newPassword',
        component: 'input',
        componentProps: {
          width: '311px',
        },
      },
      {
        span: 24,
        label: '确认密码',
        prop: 'confirmPassword',
        component: 'input',
        componentProps: {
          width: '311px',
        },
      },
    ],
  },
];
const useBaseDataStores = store.useBaseDataStore();

const updateSubmit = async () => {
  
  const pageForm = pageFormRef.value.ruleFormRef
  let data = {
    oldPassword: MD5(formUpdate.value.oldPassword).toString(),
    newPassword: MD5(formUpdate.value.newPassword).toString(),
    confirmPassword: MD5(formUpdate.value.confirmPassword).toString(),
  }
  await pageForm.validate().then(async () => {
         const res = await updatePassword(data);
        if (res.code == '200') {
          ElMessage.success('修改成功');
          getEmpInfoApi();
          removeToken();
          navigateTo('/login');
          useBaseDataStores.resetState()
          passwordVisible.value = false;

        } else {
          //ElMessage.error(res.msg);
        }
    })
    .catch(() => {});

  
};

const passwordVisible = ref(false);
const updateRules = reactive<FormRules>({
  oldPassword: [
    { required: true, message: '请输入旧密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
  ],
  newPassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
  ],
  confirmPassword: [
    { required: true, message: '请输入确认密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
  ],
});
const onSubform = async () => {
  //console.log(formData.value.notes);
  const res = await updateNotes({notes:formData.value.notes,avatarUrl:formData.value.avatarUrl});
  if (res.code == '200') {
    ElMessage.success('修改成功');
    getEmpInfoApi();

  } else {
    //ElMessage.error('修改失败');
  }
};
const getEmpInfoApi = async () => {
  const res = await getEmpInfo();
  if (res && res.data) {
    if(res.data.gender === null ){
      res.data.gender = '-'
    }else{
      res.data.gender = res.data.gender == '1' ? '男' :res.data.gender == '2' ?  '女':'未知';
    }
    formData.value = res.data;
  }
};

onMounted(async () => {
  getEmpInfoApi();
});
</script>
<style scoped lang="scss">
::v-deep(.el-upload-list__item-info) {
  width: 500px !important;
}

// .loading-skeleton {
//   padding: 20px;
//   min-height: 400px;
// }
</style>
